<template>
  <van-cell center title="心动模式">
    <template #right-icon>
      <van-switch v-model="isMatchMode" size="24"></van-switch>
    </template>
  </van-cell>
  <user-card-list :user-list="userList" :loading="loading"></user-card-list>
  <van-empty v-if="!userList||userList.length<1" description="数据为空"></van-empty>

</template>

<script setup lang="ts">
// @ts-ignore
import {onMounted, ref, watchEffect} from "vue";
// @ts-ignore
import myAxios from "../plugins/myAxios.js";
// @ts-ignore
import {Toast} from "vant";
import UserCardList from "../components/UserCardList.vue";

const userList = ref();
const isMatchMode = ref<boolean>(false);
const loading = ref(true);

const loadData = async () => {
  let userListData = [];
  loading.value = true;
  // 心动模式，根据标签比配用户
  if (isMatchMode.value) {
    const num = 10;

    userListData = await myAxios.get('/user/match', {
      params: {
        num
      },
      // @ts-ignore
    }).then(res => {
      console.log(res)
      return res?.data;
      // @ts-ignore
    }).catch(error => {
      console.log(error)
      Toast('请求失败');
    });
  } else {
    console.log('putong')
    // 普通模式，直接分页查询
    userListData = await myAxios.get('/user/recommend', {
      params: {
        pageSize: 8,
        pageNum: 1
      },
      // @ts-ignore
    }).then(res => {
      console.log(res)
      return res?.data?.records;
      // @ts-ignore
    }).catch(error => {
      console.log(error)
      Toast.fail('请求失败');
    });

  }
  if (userListData) {
    // @ts-ignore
    userListData.forEach(user => {
      if (user.tags) {
        user.tags = JSON.parse(user.tags);
      }
    })
    userList.value = userListData;
  }
  loading.value = false;
};

watchEffect(() => {
  loadData();
})

</script>

<style scoped>

</style>
